<template>
	<view class="content">
		<view class="top">
			<view @click="jiluMao" class="topT f f-a-c f-j-b">
				<view class="left">
					记录猫猫
				</view>
				<view class="right f f-a-c ">
					<view class="selectName">
						{{comNum||'请选择'}}
					</view>
					<image src="/static/jiantou.png" class="jiantou" mode=""></image>
				</view>
			</view>
			<view @click="shows=true" class="topB f f-a-c f-j-b">
				<view class="left">
					记录猫猫
				</view>
				<view class="right f f-a-c ">
					<view class="selectNames">
						{{defaultTime}}
					</view>
					<image src="/static/jiantou.png" class="jiantou" mode=""></image>
				</view>
			</view>
			<!-- 	<view class="topTime">

			</view> -->
		</view>
		<view class="botImgUpload">
			<textarea v-model="textarea" name="" placeholder="快来记录一下你的宝贝吧" class="text" id="" cols="30"
				rows="10"></textarea>
			<!-- 下面的上传图片 -->
			<view class="pingText">
				<u-upload ref="uUpload" :show-progress="false" :file-list="fileList" @on-remove="onRemove"
					upload-text="点击上传" max-count="9" :form-data="fromData" width="190" @on-success="succress"
					:before-upload="beforeUpload" height="190" :action="url"></u-upload>
			</view>
		</view>
		<u-popup mode="bottom" border-radius="30" v-model="show">
			<view class="editl">
				<view class="topX f f-a-c f-j-b">
					<view class="left">
						选择猫猫
					</view>
					<image src="/static/Frame@2x(15).png" @click="show=false" class="x" mode=""></image>
				</view>
				<view class="list">
					<scroll-view scroll-y style="height: 500rpx;width: 100%;" @scrolltolower="onreachBottom">
						<view class=" f f-a-c f-w-w">
							<view v-for="(item,index) in list" :key="index" @click="clickSets(item,index)"
								:class="{active:setel.includes(index)}" class="listItem f f-a-c f-j-c">
								<image :src="item.avatar" class="logo" mode=""></image>
								<view class="name">
									{{item.name}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view @click="comfig" class="btn">
					确定
				</view>
			</view>
		</u-popup>
		<view @click="save" class="save">
			保存
		</view>
		<u-picker @confirm="confirmFn" mode="time" :params="params" :default-time="defaultTime"
			v-model="shows"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shows: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				defaultTime: '2023-01',
				show: false,
				textarea: '',
				url: uni.getStorageSync('upload_domain'),
				token: uni.getStorageSync('upload_token'),
				fromData: {
					token: uni.getStorageSync('upload_token'),
					key: ''
				},
				page: 1,
				list: [],
				total: 0,
				myList: [],
				setel: [],
				num: 1,
				id: '',
				imgList: [],
				fileList: [],
				domain: uni.getStorageSync('domain'),
			}

		},
		onReady() {

		},
		onShow() {

		},
		async onLoad(options) {
			this.num = options.num || 1
			this.id = options.id
			this.fromData.key = this.genKey()
			if (this.num == 1) {
				this.initTime()
				this.page = 1
				this.list = []
				await this.initList()
				this.list.forEach((item, index) => {
					if (item.id == uni.getStorageSync('homeId')) {
						this.myList = [item]
					}
				})

			} else if (this.num == 2) {
				this.fileList = JSON.parse(options.fileList)
				this.myList = JSON.parse(options.pets)
				this.textarea = options.textarea
				this.imgList = JSON.parse(options.fileList).map(item => item.url)
				// this.recorded_time = 
				this.initTimes(options.recorded_time)
				this.page = 1
				this.list = []
				this.initList()
				uni.hideLoading()
			}
		},
		computed: {
			comNum() {
				let str = ''
				this.myList.forEach(item => {
					str += item.name + ' '
				})
				return str
			}
		},
		methods: {
			initTime() {
				let date = new Date()
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const data = date.getDate(); //天
				var hours = date.getHours(); // 获取小时数
				var minutes = date.getMinutes(); // 获取分钟数
				var miao = date.getSeconds(); // 获取分钟数
				this.defaultTime = year + '-' + (month < 10 ? '0' + month : month) + '-' + (data < 10 ? '0' + data :
						data) +
					' ' +
					(hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (miao <
						10 ?
						'0' + miao : miao)
			},
			initTimes(time) {
				console.log(time, '111111111');
				let date = new Date(time)
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const data = date.getDate(); //天
				var hours = date.getHours(); // 获取小时数
				var minutes = date.getMinutes(); // 获取分钟数
				var miao = date.getSeconds(); // 获取分钟数
				this.defaultTime = year + '-' + (month < 10 ? '0' + month : month) + '-' + (data < 10 ? '0' + data :
						data) +
					' ' +
					(hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (miao <
						10 ?
						'0' + miao : miao)
			},

			// 点击保存
			async save() {
				if (this.imgList.length == 0) {
					return this.$msg('请上传图片')
				}
				if (this.num == 2) {
					console.log(this.id, '555555555555555555');
					// 代表修改
					let n = await this.$api.xiuWashingRecord({
						pet_ids: this.myList.map(item => item.id),
						content: this.textarea,
						images: this.imgList.map(item => item).join(','),
						recorded_time: this.defaultTime,
						type: 4
					}, this.id)
					this.$msg(n.msg)
					if (n.code == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				} else {
					let n = await this.$api.addWashingRecord({
						pet_ids: this.myList.map(item => item.id),
						content: this.textarea,
						images: this.imgList.map(item => item).join(','),
						recorded_time: this.defaultTime,
						type: 4
					})
					this.$msg(n.msg)
					if (n.code == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}

				}
				// console.log(this.myList.map(item => item.id).join(','), '222222222222222222222')
				// return
			},
			async initList() {
				let n = await this.$api.petList({
					page: this.page
				})
				this.total = n.data.total
				this.list = [...this.list, ...n.data.rows]
			},
			// 滑到下面
			onreachBottom() {
				if (this.list.length < this.total) {
					this.page++
					this.initList()
				}
				console.log('11111111111111111111');

			},
			// 这个是
			confirmFn(e) {
				let time = +new Date()
				let time2 = +new Date(e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e
					.second)
				if (time2 > time) {
					return this.$msg('不得高于当前时间')
				}
				console.log(e, '111111');
				// this.defaultTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
				this.defaultTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
			},
			jiluMao() {
				this.show = true
			},
			comfig() {
				if (this.setel.length == 0) {
					return this.$msg('您还没选择')
				}
				let n = []
				this.setel.forEach((item, index) => {
					n.push(this.list[item])
				})
				this.myList = n
				this.show = false
			},
			// 点击选择
			clickSets(item, index) {
				if (!this.setel.includes(index)) {
					this.setel.push(index)
				} else {
					let setels = []
					this.setel.forEach((ite, inde) => {
						if (ite == index) {

						} else {
							setels.push(ite)
						}
					})
					this.setel = setels
				}
			},
			onRemove(index, lists) {
				this.imgList = []
				lists.forEach(item => {
					this.imgList.push(item.url)
				})
			},
			succress(data, index, lists, name) {
				uni.hideLoading()
				console.log(data, index, lists, name, '999999999');
				this.imgList.push(this.domain + '/' + data.key)
			},
			genKey() {
				uni.showLoading({
					title: "加载中"
				})
				let n = `img/${+new Date()+'/'+this.randomString()}.png`
				console.log(n);
				return n
			},
			beforeUpload(index, list) {
				console.log(index, list, '000');
				// this.imgList = list.filter(item => {
				// 	return this.domain + '/' + item.response.key
				// })
				this.fromData.key = this.genKey()
				console.log(this.fromData, '8888888');
				return true
			},
			randomString() {
				let str = 'ABCDEFGHIJKIMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
				let num = '';
				for (let i = 0; i < 16; i++) {
					num += str.charAt(Math.floor(Math.random() * str.length));
				}
				console.log(num, '000000000000');
				return num;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.editl {
		// height: 200rpx;
		padding: 25rpx;
		padding-bottom: 50rpx;

		.btn {
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			background: $brown;
			border-radius: 48rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 500;
			text-align: center;
			color: #ffffff;
			margin-bottom: 30rpx;
		}

		.list {
			margin-top: 40rpx;
			margin-bottom: 50rpx;
			max-height: 500rpx;
			overflow-y: auto;

			.listItem {
				height: 96rpx;
				background: #f7f6f2;
				border-radius: 32rpx;
				padding: 16rpx 24rpx;
				border: 2rpx solid transparent;
				margin-bottom: 24rpx;
				margin-right: 24rpx;

				.logo {
					width: 64rpx;
					height: 64rpx;
					border-radius: 36rpx;
					margin-right: 15rpx;
				}

				.name {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-500;
					font-weight: 600;
					text-align: LEFT;
					color: #2f2319;
					width: 50%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					/* display: -webkit-box; */
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}
			}
		}

		.active {
			background: #f4efeb !important;
			border: 2rpx solid #977961 !important;
		}

		.topX {
			.left {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: #2f2319;
			}

			.x {
				width: 58rpx;
				height: 58rpx;
			}
		}
	}

	/deep/ .u-list-item {
		border-radius: 20rpx !important;
		width: 165rpx !important;
		height: 165rpx !important;
	}

	.pingText {
		width: 90%;
		// padding: 30rpx 20rpx;
		border-radius: 30rpx;
		background: #fffefc;
		// margin: 20rpx auto;

		.tu {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: LEFT;
			color: #666666;
			margin-bottom: 20rpx;
		}
	}

	.save {
		position: fixed;
		width: 90%;
		left: 50%;
		transform: translateX(-50%);
		bottom: 100rpx;
		height: 96rpx;
		line-height: 96rpx;
		background: $brown;
		border-radius: 48rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 500;
		text-align: center;
		color: $bai;
	}

	.botImgUpload {
		width: 90%;
		margin: 0 auto;
		background: #fffefc;
		border-radius: 24rpx;
		padding: 30rpx;
		margin-top: 30rpx;
		color: #cbc2bb;

		.text {
			width: 100%;
			height: 200rpx;
			color: #2f2319;
		}
	}

	.content {
		height: 100vh;
		width: 100%;
		background-color: #f7f6f2;
	}

	.top {
		width: 90%;
		margin: 0 auto;
		background: #fffefc;
		border-radius: 24rpx;
		padding: 30rpx;
		margin-top: 30rpx;

		.topT {
			padding-bottom: 40rpx;
			border-bottom: 2rpx solid $f1eeeb;
			margin-bottom: 40rpx;
		}

		.right {
			.selectName {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $cbc2bb;
			}

			.selectNames {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: #2f2319;
			}

			.jiantou {
				width: 16rpx;
				height: 24rpx;
				margin-left: 15rpx;
			}
		}

		.left {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 600;
			text-align: LEFT;
			color: $hei;
		}
	}
</style>